<template>
	<view class="print-settings-page">
		<view class="printer-section">
			<view class="printer-status">
				<text class="printer-name">云打印机</text>
				<view class="status-icons">
					<view class="status-icon online">
						<uni-icons type="smallcircle-filled" size="10" color="#11D336" ;></uni-icons>
						在线
					</view>
					<view class="status-icon offline">
						<uni-icons type="smallcircle-filled" size="10" color="#C5C5C5" ;></uni-icons>
						离线
					</view>
					<view class="status-icon out-of-paper">
						<uni-icons type="smallcircle-filled" size="10" color="#D01314"></uni-icons>
						缺纸
					</view>
				</view>
			</view>
			<view class="printerContainer">
				<view class="addPrinterContainer" v-for="item in brandInfo" :key="item.id"
					@tap="goStoreList(item.print_brand.id)">
					<img :src="item.print_brand.icon" alt="" class="img" />
					<text>{{item.print_brand.print_name}}</text>
				</view>
				<view class="addPrinterContainer" @tap="goNext">
					<uni-icons type="plusempty" size="30" color="#999"></uni-icons>
					<text>添加打印机</text>
				</view>
			</view>
		</view>
		<view class="template-section">
			<text class="section-title">打印模板</text>
			<view class="template-items">
				<view class="template-item" @click="selectTemplate(item.id)" v-for="item in templateList"
					:key="item.id">
					<img :src="item.icon" alt="" class="img" />
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
		<!-- <view class="settings-section">
			<view class="setting-item">
				<view class="left">
					<view class="setting-title">自动打印</view>
					<view class="setting-description">开启后自动控制打印机出票</view>
				</view>

				<switch :checked="autoPrint" @change="handleAutoPrintChange" style="transform:scale(0.8)"></switch>
			</view>
			<view class="setting-item">
				<view class="left">
					<view class="setting-title">打印商品详情</view>
					<view class="setting-description">开启后自动打印商品详情</view>
				</view>

				<switch :checked="printProductDetails" @change="handlePrintProductDetailsChange"
					style="transform:scale(0.8)"></switch>
			</view>
			<view class="setting-item">
				<view class="left">
					<view class="setting-title">打印商品明细价格</view>
					<view class="setting-description">开启后只打印套餐金额，商品详情金额不再打印</view>
				</view>
				<switch :checked="printProductPriceDetails" @change="handlePrintProductPriceDetailsChange"
					style="transform:scale(0.8)"></switch>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		brandPrints,
		templatesList
	} from "@/api/userApi/user.js"
	export default {
		data() {
			return {
				printerStatus: 'offline',
				autoPrint: true,
				printProductDetails: true,
				printProductPriceDetails: false,
				brandInfo: [],
				templateList: []
			};
		},
		methods: {
			selectTemplate(templateType) {
				uni.navigateTo({
					url: `/pagesUser/templateInfo/templateInfo?type=${templateType}`
				})
			},
			goNext() {
				uni.navigateTo({
					url: "/pagesUser/printerList/printerList"
				})
			},
			goStoreList(id) {
				uni.navigateTo({
					url: `/pagesUser/storeList/storeList?id=${id}`
				})
			},
			handleAutoPrintChange(event) {
				uni.showToast({
					icon: "none",
					title: "暂不支持关闭"
				})
				if (event.detail.value == false) {
					this.autoPrint = true
				}
			},
			handlePrintProductDetailsChange(event) {
				uni.showToast({
					icon: "none",
					title: "暂不支持关闭"
				})
				if (event.detail.value == false) {
					this.printProductDetails = true
				}
			},
			handlePrintProductPriceDetailsChange(event) {
				uni.showToast({
					icon: "none",
					title: "暂不支持开启"
				})
				if (event.detail.value) {
					this.printProductPriceDetails = false
				}
			},
			getBrandPrints() {
				brandPrints().then(res => {
					if (res.code == 200) {
						this.brandInfo = res.data
					}
				})
			},
			getTemplatesList() {
				templatesList().then(res => {
					if (res.code == 200) {
						this.templateList = res.data
					}
				})
			}
		},
		onLoad() {
			this.getTemplatesList()
		},
		onShow() {
			this.getBrandPrints()
		}
	};
</script>

<style lang="scss">
	$primary-color: #3399ff;
	$secondary-color: #ff9900;
	$error-color: #ff3333;
	$success-color: #33cc33;
	$gray: #999;

	.print-settings-page {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding-top: 20rpx;

		.printer-section {
			width: 90%;
			margin: 0 auto;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx;

			.printer-status {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.printer-name {
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
				}

				.status-icons {
					display: flex;

					.status-icon {
						font-size: 28rpx;
						color: #333;
						margin-right: 20rpx;
						display: flex;
						align-items: center;

						.active {
							font-weight: bold;
						}
					}

					.online {
						color: #11D336;
					}

					.offline {
						color: #C5C5C5;
					}

					.out-of-paper {
						color: #D01314;
					}
				}
			}

			.printerContainer {
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.addPrinterContainer {
					width: 290rpx;
					height: 260rpx;
					border: 2rpx dashed #9c8d8d;
					border-left: 2rpx dashed #9c8d8d;
					border-right: 2rpx dashed #9c8d8d;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-top: 10rpx;

					text {
						font-weight: 500;
						font-size: 29rpx;
						color: #999999;
						margin-top: 10rpx;
					}

					.img {
						width: 193rpx;
						height: 140rpx;
					}
				}

			}

			.printer-info {
				display: flex;
				align-items: center;

				.printer-image {
					width: 200rpx;
					height: 200rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}

					.printer-model {
						font-size: 24rpx;
						color: #333;
						text-align: center;
						margin-top: 10rpx;
					}

					.printer-status-text {
						font-size: 20rpx;
						color: $gray;
						text-align: center;
						margin-top: 10rpx;

						.offline {
							color: $gray;
						}
					}
				}

				.add-printer-btn {
					display: flex;
					flex-direction: column;
					align-items: center;

					uni-icons {
						font-size: 40rpx;
						color: $gray;
					}

					text {
						font-size: 24rpx;
						color: $gray;
						margin-top: 10rpx;
					}
				}
			}
		}

		.template-section {
			width: 90%;
			margin: 0 auto;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx;
			margin-top: 30rpx;

			.section-title {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.template-items {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 30rpx;

				.template-item {
					width: 308rpx;
					height: 89rpx;
					background: #F8F8F8;
					border-radius: 9rpx 9rpx 9rpx 9rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 20rpx;

					.img {
						width: 37rpx;
						height: 37rpx;
						margin-right: 10rpx;
					}

					text {
						font-weight: 400;
						font-size: 29rpx;
						color: #333333;
					}
				}
			}
		}

		.settings-section {
			width: 90%;
			margin: 0 auto;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx;
			margin-top: 30rpx;

			.setting-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
				margin-bottom: 20rpx;

				.setting-title {
					font-weight: 400;
					font-size: 29rpx;
					color: #333333;
				}

				.setting-description {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					margin-top: 6rpx;
				}
			}
		}
	}
</style>